<template>
  <div class="monitor-container">
    <!-- 标题和状态 -->
    <div class="header">
      <h1>高压水监控系统</h1>
      <div class="status">
        <span class="connection-status" :class="{'connected': isConnected}">
          {{ isConnected ? '已连接' : '未连接' }}
        </span>
        <span class="last-update">最后更新: {{ lastUpdate }}</span>
      </div>
    </div>
    
    <!-- 实时曲线图 -->
    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
    
    <!-- 模拟量数据显示 -->
    <div class="simulate-values">
      <!-- 压力传感器 -->
      <div class="category">
        <h2><i class="fas fa-tachometer-alt"></i> 压力传感器</h2>
        <div class="sensor-group">
          <div v-for="id in [74, 75, 81, 82, 83, 84, 85, 86]" :key="id" class="sensor-item">
            <div class="sensor-label">
              {{ sensorNames[id] || `P${id}` }}:
            </div>
            <div class="sensor-value" :style="{color: getSensorColor(id)}">
              {{ getSensorValue(id) }} MPa
            </div>
          </div>
        </div>
      </div>
      
      <!-- 温度传感器 -->
      <div class="category">
        <h2><i class="fas fa-thermometer-half"></i> 温度传感器</h2>
        <div class="sensor-group">
          <div v-for="id in [78, 79, 80]" :key="id" class="sensor-item">
            <div class="sensor-label">
              {{ sensorNames[id] || `T${id}` }}:
            </div>
            <div class="sensor-value" :style="{color: getSensorColor(id)}">
              {{ getSensorValue(id) }} ℃
            </div>
          </div>
        </div>
      </div>
      
      <!-- 流量计 -->
      <div class="category">
        <h2><i class="fas fa-wind"></i> 流量计</h2>
        <div class="sensor-group">
          <div v-for="id in [69, 70, 71]" :key="id" class="sensor-item">
            <div class="sensor-label">
              {{ sensorNames[id] || `F${id}` }}:
            </div>
            <div class="sensor-value" :style="{color: getSensorColor(id)}">
              {{ getSensorValue(id) }} m³/h
            </div>
          </div>
        </div>
      </div>
      
      <!-- 液位传感器 -->
      <div class="category">
        <h2><i class="fas fa-water"></i> 液位传感器</h2>
        <div class="sensor-group">
          <div class="sensor-item">
            <div class="sensor-label">液位1:</div>
            <div class="sensor-value" :style="{color: getSensorColor('liquidLevel')}">
              {{ Number(liquidLevel).toFixed(2) }} mm
            </div>
          </div>
          <div class="sensor-item">
            <div class="sensor-label">液位2:</div>
            <div class="sensor-value" :style="{color: getSensorColor('liquidLevel1')}">
              {{ Number(liquidLevel1).toFixed(2) }} mm
            </div>
          </div>
        </div>
      </div>
      
      <!-- 温度显示 -->
      <div class="category">
        <h2><i class="fas fa-thermometer"></i> 温度显示</h2>
        <div class="sensor-group">
          <div class="sensor-item">
            <div class="sensor-label">温度1:</div>
            <div class="sensor-value" :style="{color: getSensorColor('temperature')}">
              {{ Number(temperature).toFixed(2) }} ℃
            </div>
          </div>
          <div class="sensor-item">
            <div class="sensor-label">温度2:</div>
            <div class="sensor-value" :style="{color: getSensorColor('temperature1')}">
              {{ Number(temperature1).toFixed(2) }} ℃
            </div>
          </div>
        </div>
      </div>
      
      <!-- 阀门开度反馈 -->
      <div class="category">
        <h2><i class="fas fa-sliders-h"></i> 阀门开度反馈</h2>
        <div class="sensor-group">
          <div v-for="id in [66, 67, 68]" :key="id" class="sensor-item">
            <div class="sensor-label">
              {{ sensorNames[id] || `V${id}` }}:
            </div>
            <div class="sensor-value" :style="{color: getSensorColor(id)}">
              {{ getSensorValue(id) }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import * as echarts from 'echarts';
import initData from "../../initData";
import bus from '../../utils/bus';

// 传感器颜色配置
const sensorColors = {
  pressure: ['#5470c6', '#6e84f0', '#8a9cff', '#a6b4ff', '#c2ccff', '#dee4ff', '#e6ebff', '#f0f3ff'],
  temperature: ['#91cc75', '#a8d991', '#bfe6ad', '#d6f3c9', '#edffe5'],
  flow: ['#fac858', '#fad272', '#fbdc8c', '#fce6a6'],
  valve: ['#73c0de', '#8ccce6', '#a5d8ee', '#bee4f6'],
  liquid: ['#ee6666', '#ea8686'],
  tempDisplay: ['#ee6666', '#ea8686']
};

export default {
  name: 'FuelSystemMonitor',
  setup() {
    // 传感器名称映射
    const sensorNames = ref({
      74: '水罐左',
      75: '水罐右',
      81: 'YL51',
      82: 'YL52',
      83: 'YL53',
      84: 'YL55',
      85: 'YL57',
      86: 'YL59',
      78: 'WD54',
      79: 'WD56',
      80: 'WD58',
      69: 'LLJ39',
      70: 'LLJ40',
      71: 'LLJ41',
      66: 'TJF36',
      67: 'TJF37',
      68: 'TJF38'
    });

    // 初始化 WebSocket
    const { socket } = initData(true);
    const isConnected = ref(true);
    const lastUpdate = ref(new Date().toLocaleTimeString());
    
    // 图表实例
    const chart = ref(null);
    let chartInstance = null;

    // 模拟量数据存储
    const sensorValues = ref({});
    const liquidLevel = ref(0);
    const liquidLevel1 = ref(0);
    const temperature = ref(0);
    const temperature1 = ref(0);

    // 初始化传感器数据
    const initSensorValues = () => {
      // 压力传感器
      [74, 75, 81, 82, 83, 84, 85, 86].forEach(id => {
        sensorValues.value[id] = 0.00;
      });
      
      // 温度传感器
      [78, 79, 80].forEach(id => {
        sensorValues.value[id] = 0.00;
      });
      
      // 流量计
      [69, 70, 71].forEach(id => {
        sensorValues.value[id] = 0.00;
      });
      
      // 阀门开度反馈
      [66, 67, 68].forEach(id => {
        sensorValues.value[id] = 0;
      });
      
      // 液位和温度初始值
      liquidLevel.value = 0;
      liquidLevel1.value = 0;
      temperature.value = 0;
      temperature1.value = 0;
    };

    // 获取传感器值
    const getSensorValue = (id) => {
      if (id === 'liquidLevel') return liquidLevel.value.toFixed(1);
      if (id === 'liquidLevel1') return liquidLevel1.value.toFixed(1);
      if (id === 'temperature') return temperature.value.toFixed(2);
      if (id === 'temperature1') return temperature1.value.toFixed(2);
      
      const value = sensorValues.value[id];
      if (id >= 66 && id <= 68) { // 阀门开度
        return value !== undefined ? Math.round(value) : 0;
      } else if (id >= 69 && id <= 71) { // 流量
        return value !== undefined ? value.toFixed(2) : '0.00';
      } else if (id >= 74 && id <= 86) { // 压力
        return value !== undefined ? value.toFixed(2) : '0.00';
      } else if (id >= 78 && id <= 80) { // 温度
        return value !== undefined ? value.toFixed(2) : '0.00';
      } else if (id === 76) { // 液位
        return liquidLevel.value !== undefined ? liquidLevel.value.toFixed(1) : '0.0';
      } else if (id === 77) { // 液位
        return liquidLevel.value !== undefined ? liquidLevel.value.toFixed(1) : '0.0';
      } else if (id === 72) { // 温度
        return temperature.value !== undefined ? temperature.value.toFixed(1) : '0.0';
      } else if (id === 73) { // 温度
        return temperature1.value !== undefined ? temperature1.value.toFixed(1) : '0.0';
      }
    };

    // 获取传感器颜色
    const getSensorColor = (id) => {
      if (id === 'liquidLevel') {
        const level = liquidLevel.value;
        return level > 2000 ? '#ee6666' : level < 1000 ? '#fac858' : sensorColors.liquid[0];
      }
      if (id === 'liquidLevel1') {
        const level = liquidLevel1.value;
        return level > 2000 ? '#ee6666' : level < 1000 ? '#fac858' : sensorColors.liquid[1];
      }
      if (id === 'temperature') {
        const temp = temperature.value;
        return temp > 50 ? '#ee6666' : temp < 30 ? '#fac858' : sensorColors.tempDisplay[0];
      }
      if (id === 'temperature1') {
        const temp = temperature1.value;
        return temp > 50 ? '#ee6666' : temp < 30 ? '#fac858' : sensorColors.tempDisplay[1];
      }
      
      const value = sensorValues.value[id] || 0;
      
      if (id === 74 || id === 75 || (id >= 81 && id <= 86)) { // 压力传感器
        return value > 1.2 ? '#ee6666' : value < 0.6 ? '#fac858' : sensorColors.pressure[id-74];
      }
      else if (id >= 78 && id <= 80) { // 温度传感器
        return value > 50 ? '#ee6666' : value < 30 ? '#fac858' : sensorColors.temperature[id-78];
      } 
      else if (id >= 69 && id <= 71) { // 流量计
        return value > 15 ? '#ee6666' : value < 8 ? '#fac858' : sensorColors.flow[id-69];
      } 
      else if (id >= 66 && id <= 68) { // 阀门开度
        return value > 90 ? '#ee6666' : value < 10 ? '#fac858' : sensorColors.valve[id-66];
      }
      
      return '#73c0de';
    };

    // 生成动态系列配置
   const generateSeries = () => {
    // 压力传感器系列 (8个)
    const pressureSeries = [74, 75, 81, 82, 83, 84, 85, 86].map((id, index) => ({
      name: `${sensorNames.value[id] || `P${id}`} (MPa)`,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 4,
      showSymbol: false,
      data: [],
      lineStyle: { 
        width: 1.5,
        color: sensorColors.pressure[index % sensorColors.pressure.length] // 防止索引越界
      },
      itemStyle: { 
        color: sensorColors.pressure[index % sensorColors.pressure.length]
      },
      animation: false
    }));

    // 温度传感器系列 (3个)
    const tempSeries = [78, 79, 80].map((id, index) => ({
      name: `${sensorNames.value[id] || `T${id}`} (℃)`,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 4,
      showSymbol: false,
      data: [],
      lineStyle: { 
        width: 1.5,
        color: sensorColors.temperature[index % sensorColors.temperature.length]
      },
      itemStyle: { 
        color: sensorColors.temperature[index % sensorColors.temperature.length]
      },
      animation: false
    }));

    // 流量计系列 (3个)
    const flowSeries = [69, 70, 71].map((id, index) => ({
      name: `${sensorNames.value[id] || `F${id}`} (m³/h)`,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 4,
      showSymbol: false,
      data: [],
      lineStyle: { 
        width: 1.5,
        color: sensorColors.flow[index % sensorColors.flow.length]
      },
      itemStyle: { 
        color: sensorColors.flow[index % sensorColors.flow.length]
      },
      yAxisIndex: 1,
      animation: false
    }));

    // 液位系列 (2个)
    const liquidSeries = [
      {
        name: '液位1 (mm)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: false,
        data: [],
        lineStyle: { 
          width: 2, 
          color: sensorColors.liquid[0]
        },
        itemStyle: { 
          color: sensorColors.liquid[0]
        },
        yAxisIndex: 1,
        animation: false
      },
      {
        name: '液位2 (mm)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: false,
        data: [],
        lineStyle: { 
          width: 2, 
          color: sensorColors.liquid[1]
        },
        itemStyle: { 
          color: sensorColors.liquid[1]
        },
        yAxisIndex: 1,
        animation: false
      }
    ];

    // 温度显示系列 (2个)
    const tempDisplaySeries = [
      {
        name: '温度1 (℃)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: false,
        data: [],
        lineStyle: { 
          width: 2, 
          color: sensorColors.tempDisplay[0]
        },
        itemStyle: { 
          color: sensorColors.tempDisplay[0]
        },
        animation: false
      },
      {
        name: '温度2 (℃)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: false,
        data: [],
        lineStyle: { 
          width: 2, 
          color: sensorColors.tempDisplay[1]
        },
        itemStyle: { 
          color: sensorColors.tempDisplay[1]
        },
        animation: false
      }
    ];

    // 阀门开度系列 (3个)
    const valveSeries = [66, 67, 68].map((id, index) => ({
      name: `${sensorNames.value[id] || `V${id}`} (%)`,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 4,
      showSymbol: false,
      data: [],
      lineStyle: { 
        width: 1.5,
        color: sensorColors.valve[index % sensorColors.valve.length]
      },
      itemStyle: { 
        color: sensorColors.valve[index % sensorColors.valve.length]
      },
      yAxisIndex: 1,
      animation: false
    }));

    // 合并所有系列
    return [
      ...pressureSeries,
      ...tempSeries,
      ...flowSeries,
      ...liquidSeries,
      ...tempDisplaySeries,
      ...valveSeries
    ];
  };

    // 初始化图表
    const initChart = () => {
      if (!chart.value) return;
      chartInstance = echarts.init(chart.value);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {
            let result = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`;
            params.forEach(param => {
              const marker = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${param.color}"></span>`;
              result += `${marker} ${param.seriesName}: <span style="font-weight:bold">${param.value}</span><br/>`;
            });
            return result;
          },
          backgroundColor: 'rgba(15, 27, 49, 0.9)',
          borderColor: 'rgba(255, 255, 255, 0.1)',
          textStyle: {
            color: '#fff'
          },
          extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);'
        },
        legend: {
          data: [
            ...[74, 75, 81, 82, 83, 84, 85, 86].map(id => `${sensorNames.value[id] || `P${id}`} (MPa)`),
            ...[78, 79, 80].map(id => `${sensorNames.value[id] || `T${id}`} (℃)`),
            ...[69, 70, 71].map(id => `${sensorNames.value[id] || `F${id}`} (m³/h)`),
            '液位1 (mm)',
            '液位2 (mm)',
            '温度1 (℃)',
            '温度2 (℃)',
            ...[66, 67, 68].map(id => `${sensorNames.value[id] || `V${id}`} (%)`)
          ],
          
          textStyle: { 
            color: '#fff',
            fontSize: 12
          },
          right: 120,
          top: 0,
          type: 'plain', // 不使用分页
          orient: 'horizontal',
          pageIconColor: '#fff',
          pageTextStyle: { 
            color: '#fff' 
          },
          pageButtonItemGap: 5,
          pageButtonGap: 10,
          pageButtonPosition: 'end',
          pageFormatter: '{current}/{total}',
          pageIcons: {
            horizontal: ['M0,0L12,-10L12,10Z', 'M0,0L-12,-10L-12,10Z']
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '18%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataZoom: { 
              yAxisIndex: false,
              title: {
                zoom: '区域缩放',
                back: '还原缩放'
              }
            },
            restore: { 
              title: '还原'
            },
            saveAsImage: { 
              title: '保存图片',
              pixelRatio: 2,
              backgroundColor: 'transparent',
              excludeComponents: ['toolbox']
            },
            magicType: { 
              type: ['line', 'bar'],
              title: {
                line: '切换折线图',
                bar: '切换柱状图'
              }
            }
          },
          iconStyle: {
            borderColor: '#fff',
            emphasis: {
              borderColor: '#3498db'
            }
          },
          tooltip: {
            show: true,
            backgroundColor: 'rgba(15, 27, 49, 0.9)',
            textStyle: {
              color: '#fff'
            }
          },
          right: 250,
          top: 30
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            zoomLock: false,
            filterMode: 'filter'
          },
          {
            type: 'slider',
            show: true,
            bottom: 25,
            start: 0,
            end: 100,
            height: 15,
            backgroundColor: 'rgba(255,255,255,0.1)',
            fillerColor: 'rgba(52, 152, 219, 0.3)',
            borderColor: 'transparent',
            handleStyle: {
              color: '#3498db',
              borderColor: '#3498db'
            },
            textStyle: {
              color: '#fff'
            },
            brushSelect: false,
            zoomLock: false,
            filterMode: 'filter'
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: '#7f8c8d'
            }
          },
          axisLabel: {
            color: '#bdc3c7',
            fontSize: 11,
            interval: (index) => {
              const dataCount = chartInstance?.getOption()?.xAxis[0]?.data?.length || 0;
              return dataCount < 30 ? 0 : Math.floor(dataCount / 10);
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '压力/温度',
            nameTextStyle: {
              color: '#bdc3c7',
              padding: [0, 0, 0, 40]
            },
            position: 'left',
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)',
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#7f8c8d'
              },
              onZero: false
            },
            axisLabel: {
              color: '#bdc3c7',
              formatter: '{value}'
            },
            axisTick: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          {
            type: 'value',
            name: '流量/液位/开度',
            nameTextStyle: {
              color: '#bdc3c7',
              padding: [0, 40, 0, 0]
            },
            position: 'right',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#7f8c8d'
              },
              onZero: false
            },
            axisLabel: {
              color: '#bdc3c7',
              formatter: '{value}'
            },
            axisTick: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          }
        ],
        series: generateSeries()
      };

      chartInstance.setOption(option);

      window.addEventListener('resize', function() {
        chartInstance && chartInstance.resize();
      });
    };

    // 更新图表数据
    const updateChart = () => {
      if (!chartInstance) return;

      const option = chartInstance.getOption();
      const now = new Date();
      const timeText = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
      
      // 限制数据点数量
      if (option.xAxis[0].data.length >= 100) {
        option.xAxis[0].data.shift();
        option.series.forEach(series => {
          if (Array.isArray(series.data)) {
            series.data.shift();
          }
        });
      }
      
      // 添加新时间点
      option.xAxis[0].data.push(timeText);
      
      // 更新系列数据
      option.series.forEach((series, index) => {
        if (!series.data) series.data = [];
        
        // 压力传感器 (0-7)
        if (index < 8) {
          const id = [74, 75, 81, 82, 83, 84, 85, 86][index];
          series.data.push(sensorValues.value[id] || 0);
        } 
        // 温度传感器 (8-10)
        else if (index < 11) {
          const id = [78, 79, 80][index - 8];
          series.data.push(sensorValues.value[id] || 0);
        }
        // 流量计 (11-13)
        else if (index < 14) {
          const id = [69, 70, 71][index - 11];
          series.data.push(sensorValues.value[id] || 0);
        }
        // 液位1 (14)
        else if (index === 14) {
          series.data.push(liquidLevel.value || 0);
        }
        // 液位2 (15)
        else if (index === 15) {
          series.data.push(liquidLevel1.value || 0);
        }
        // 温度1 (16)
        else if (index === 16) {
          series.data.push(temperature.value || 0);
        }
        // 温度2 (17)
        else if (index === 17) {
          series.data.push(temperature1.value || 0);
        }
        // 阀门开度 (18-20)
        else if (index >= 18 && index <= 20) {
          const id = [66, 67, 68][index - 18];
          series.data.push(sensorValues.value[id] || 0);
        }
      });

      // 更新图表
      chartInstance.setOption(option, {
        notMerge: true,
        lazyUpdate: true
      });
    };

    // 处理接收到的WebSocket数据
    const handleData = (rawData) => {
      try {
        const parsedData = typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
        
        if (parsedData.type === 1) {
          const dataItems = Array.isArray(parsedData.data) ? parsedData.data : [parsedData.data];
          
          dataItems.forEach(item => {
            const id = Number(item.id);
            const value = Number(item.data);
            
            // 更新传感器值
            if (id >= 66 && id <= 71) {
              sensorValues.value[id] = value;
            }
            else if (id >= 74 && id <= 75) {
              sensorValues.value[id] = value;
            }
            else if (id >= 78 && id <= 86) {
              sensorValues.value[id] = value;
            }
            // 特殊处理液位和温度显示
            else if (id === 76) {
              liquidLevel.value = value;
            }
            else if (id === 77) {
              liquidLevel1.value = value;
            }
            else if (id === 72) {
              temperature.value = value;
            }
            else if (id === 73) {
              temperature1.value = value;
            }
          });
          console.log("数据:", sensorValues.value);
          updateChart();
          lastUpdate.value = new Date().toLocaleTimeString();
        }
      } catch (error) {
        console.error("数据处理失败:", error);
      }
    };

    // 初始化
    onMounted(() => {
      initSensorValues();
      initChart();
      
      // 监听总线消息
      bus.on('sendMsg', handleData);
    });

    onBeforeUnmount(() => {
      bus.off('sendMsg', handleData);
      if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
      }
      window.removeEventListener('resize', function() {
        chartInstance && chartInstance.resize();
      });
    });

    return {
      sensorNames,
      chart,
      sensorValues,
      liquidLevel,
      liquidLevel1,
      temperature,
      temperature1,
      getSensorValue,
      getSensorColor,
      isConnected,
      lastUpdate
    };
  }
};
</script>

<style scoped>
/* 样式保持不变，与之前相同 */
.monitor-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #0f1b31, #1c2e4a);
  color: white;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  background-size: 90% 100%;
  background-repeat: no-repeat;
  position: fixed;
  left: 9%;
  top: 0%;
}

.header {
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.header h1 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 0.95rem;
}

.connection-status {
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: 500;
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  transition: all 0.3s ease;
}

.connection-status.connected {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.last-update {
  color: #bdc3c7;
  font-size: 0.9rem;
}

.chart-container {
  flex: 1;
  min-height: 400px;
  max-height: 51vh;
  width: 90%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  position: relative;
}

.chart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.simulate-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-height: calc(40vh - 60px);
  width: 90%;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 20px;
}

.category {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.3s ease;
}

.category:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

.category h2 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3498db;
}

.category h2 i {
  width: 20px;
  text-align: center;
}

.sensor-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.sensor-item {
  display: flex;
  flex-direction: column;
  background: rgba(30, 40, 60, 0.7);
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sensor-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background: rgba(40, 50, 70, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.sensor-label {
  font-size: 0.85rem;
  color: #bdc3c7;
  margin-bottom: 5px;
  white-space: nowrap;
}

.sensor-value {
  font-size: 1.3rem;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  transition: all 0.3s ease;
}

/* 自定义滚动条 */
.simulate-values::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.simulate-values::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.simulate-values::-webkit-scrollbar-thumb {
  background: rgba(52, 152, 219, 0.5);
  border-radius: 4px;
}

.simulate-values::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 152, 219, 0.7);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .simulate-values {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 992px) {
  .header h1 {
    font-size: 1.8rem;
  }
  
  .sensor-group {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  
  .sensor-value {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .monitor-container {
    padding: 15px;
  }
  
  .header h1 {
    font-size: 1.6rem;
  }
  
  .status {
    flex-direction: column;
    gap: 8px;
  }
  
  .simulate-values {
    grid-template-columns: 1fr;
  }
   .sensor-group {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 1.4rem;
  }
  
  .category {
    padding: 12px;
  }
  
  .sensor-item {
    padding: 10px;
  }
  
  .sensor-label {
    font-size: 0.8rem;
  }
  
  .sensor-value {
    font-size: 1rem;
  }
}
</style>